<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    /*
      WebGLRenderingContext.createShader()：可以用于创建着色器对象，可以创建顶点着色器或者片元着色器，接收参数type决定创建哪一种类型的着色器
        参数type的值可以是：
          gl.VERTEX_SHADER：创建顶点着色器​
          gl.FRAGMENT_SHADER：创建片元着色器
      WebGLRenderingContext.shaderSource(shader,source)：用于设置着色器的GLSL程序代码，创建着色器对象之后，相当于把着色器源码引入。
        参数shader：用于设置程序代码的 WebGLShader（着色器对象）。​
        参数source：包含 GLSL 程序代码的字符串。          
      WebGLRenderingContext.compileShader(shader)：用于编译一个 GLSL 着色器，使其成为二进制数据，然后就可以被WebGLProgram对象所使用。
        参数shader：要被编译的WebGLShader（着色器对象）。
      
      WebGLProgram 的作用是将顶点着色器和片元着色器组合在一起，以便 WebGL 渲染管线能够使用这两个着色器来处理顶点和片元的着色操作。
      通过创建和链接一个 WebGLProgram，可以确保顶点着色器和片元着色器能够正确地协同工作，从而完成图形的渲染。
      WebGLRenderingContext.createProgram()：可以用于创建一个WebProgram程序对象，这个对象表示一个 WebGL 着色器程序，
      它包含了一个顶点着色器和一个片元着色器，并可以被 WebGL 渲染管线使用。
      WebGLRenderingContext.attachShader(program,shader)：将一个编译好的着色器（顶点着色器或片元着色器）附加到程序对象。
        参数program：要添加着色器的WebProgram程序对象​
        参数shader：编译好的着色器
      WebGLRenderingContext.linkProgram(program)：链接给定的WebGLProgram，从而完成为程序的片元和顶点着色器准备 GPU 代码的过程，使其成为一个可用于渲染的着色器程序。
        参数program：要链接的WebProgram程序对象
      WebGLRenderingContext.useProgram(program)：将指定的程序对象设置为当前的渲染状态。
        参数program：WebProgram程序对象

      绘制图元
      WebGLRenderingContext.drawArrays()：是 WebGL API 中用于绘制图元（如点、线、三角形等）的方法。它从当前绑定的缓冲区中提取顶点数据，根据指定的绘制模式进行渲染。
        参数mode: 指定要绘制的图元类型，可以是以下常量之一：​
          gl.POINTS: 绘制一系列点。​
          gl.LINES: 绘制一系列不连接的线段。​
          gl.LINE_STRIP: 绘制一系列连接的线段。​
          gl.LINE_LOOP: 绘制一个闭合的线段环。​
          gl.TRIANGLES: 绘制一系列不连接的三角形。​
          gl.TRIANGLE_STRIP: 绘制一个三角形条带。​
          gl.TRIANGLE_FAN: 绘制一个三角形扇形。​
        参数first: 从缓冲区数组中的哪个位置开始读取顶点数据。​
        参数count: 要绘制的顶点数量。
      
      创建缓冲区对象
      WebGLRenderingContext.createBuffer()：用于创建一个新的缓冲区对象。缓冲区对象是用于存储顶点数据、颜色数据、纹理坐标数据等的内存区域，这些数据将被传递到 GPU 中以供渲染使用。
      WebGLRenderingContext.bindBuffer(target,buffer)：绑定一个给定的 WebGL 缓冲区对象到指定的目标。
        参数target：一个常量，指定要绑定的目标。常用的目标有：​
          gl.ARRAY_BUFFER: 表示一个顶点属性数组缓冲区，例如顶点坐标、顶点颜色等。​
          gl.ELEMENT_ARRAY_BUFFER: 表示一个元素数组缓冲区，存储顶点索引数据。​
        参数buffer: 一个 WebGLBuffer 对象，表示要绑定的缓冲区。如果传入 null，则解除对当前目标的绑定。
      WebGLRenderingContext.bufferData()：向缓冲区对象写入数据的方法。它将数据复制到当前绑定的缓冲区中，并且可以指定使用这些数据的模式
        target: 一个 GLenum，指定绑定缓冲区的目标。常用值包括：​
          gl.ARRAY_BUFFER：顶点属性缓冲区。​
          gl.ELEMENT_ARRAY_BUFFER：元素数组缓冲区（索引数据）。​
        srcData: 一个 ArrayBuffer、ArrayBufferView 或 null，包含要写入缓冲区的数据。如果传递 null，则会为缓冲区分配特定大小的内存，而不初始化。​
        usage: 一个 GLenum，指定数据存储的使用模式。常用值包括：​
          gl.STATIC_DRAW：数据不会或几乎不会改变。​
          gl.DYNAMIC_DRAW：数据会频繁改变。​
          gl.STREAM_DRAW：数据每次绘制时都会改变。
      
      配置 WebGL 以正确地读取和解释顶点数据
      WebGLRenderingContext.getAttribLocation(program,name)：返回了给定WebGLProgram对象中某属性的下标指向位置。其实就是要获取着色器中定义的变量的，那个变量在内存中的地址。​
        参数program：WebProgram程序对象​
        参数name：参数是顶点着色器中声明的属性变量的名称。这个名称必须与顶点着色器中的 attribute 变量名一致。
      WebGLRenderingContext.vertexAttrib[1234]f[v]()：用于设置顶点属性的数据。这些方法有多个变体，分别适用于不同数量和类型的数据。具体有：
        vertexAttrib1f(location,v0)​
        vertexAttrib2f(location,v0,v1)​
        vertexAttrib3f(location,v0,v1,v2)​
        vertexAttrib4f(location,v0,v1,v2,v3)​
        vertexAttrib1fv(location, value)​
        vertexAttrib2fv(location, value)​
        vertexAttrib3fv(location, value)​
        vertexAttrib4fv(location, value)
      WebGLRenderingContext.vertexAttribPointer()：方法用于在当前绑定的顶点缓冲区对象中指定顶点属性数组的信息。它将顶点缓冲区的数据与顶点着色器中的顶点属性关联起来。这个方法是设置顶点属性数组的重要一步。
        index: 一个 GLuint，指定顶点属性的索引位置。这个位置通常通过 gl.getAttribLocation() 方法获取。​
        size: 一个 GLint，指定每个顶点属性的组件数量。必须是 1, 2, 3 或 4。例如，对于二维位置坐标（x, y），size 应为 2。​
        type: 一个 GLenum，指定数组中每个组件的数据类型。常用值包括：​
          gl.BYTE​
          gl.UNSIGNED_BYTE​
          gl.SHORT​
          gl.UNSIGNED_SHORT​
          gl.FLOAT​
        normalized: 一个 GLboolean，指定在数据传输到着色器前是否将整数数值归一化到特定范围内。如果为 true，则归一化，否则不归一化。​
        stride: 一个 GLsizei，指定连续顶点属性间的字节偏移量。如果为 0，表示属性是紧密打包的。​
        offset: 一个 GLintptr，指定顶点属性数组中起始位置的字节偏移量。
      WebGLRenderingContext.getUniformLocation(program,name) ：是一个用于获取顶点着色器或片元着色器中 uniform 变量的 WebGLRenderingContext 方法。通过 uniform 变量的名称来获取其在 WebGL 程序中的位置，和getAttribLocation用法类似。​
        参数program：WebProgram程序对象​
        参数name：是 uniform 变量的名称，需要确保名称与着色器中定义的一致。
      WebGLRenderingContext.uniform[1234][fi][v]：用于设置顶点属性的数据。这些方法有多个变体，分别适用于不同数量和类型的数据。具体有：
        uniform1f(location, v0)​
        uniform1fv(location, value)​
        uniform1i(location, v0)​
        uniform1iv(location, value)​
        ​
        uniform2f(location, v0, v1)​
        uniform2fv(location, value)​
        uniform2i(location, v0, v1)​
        uniform2iv(location, value)​
        ​
        uniform3f(location, v0, v1, v2)​
        uniform3fv(location, value)​
        uniform3i(location, v0, v1, v2)​
        uniform3iv(location, value)​
        ​
        uniform4f(location, v0, v1, v2, v3)​
        uniform4fv(location, value)​
        uniform4i(location, v0, v1, v2, v3)​
        uniform4iv(location, value)
      
      顶点索引绘制图形
      gl.drawElements()：是 WebGL 中用于渲染图元（primitives）的函数之一，它通常与顶点缓冲和元素数组缓冲结合使用，用来绘制复杂的几何图形，比如三角形网格、线条等。​
      负责根据顶点数据和索引（元素数组）来绘制图元。它从元素数组缓冲中读取索引，这些索引指示了顶点缓冲中哪些顶点构成哪些图元（如三角形或线段）。​
        参数：
          mode：指定要绘制的图元的类型。​
            gl.POINTS：将每个顶点作为一个点来绘制。​
            gl.LINES：将每两个顶点作为一条线段来绘制。​
            gl.LINE_STRIP：将每个顶点与其后继顶点形成的线段依次相连。​
            gl.LINE_LOOP：与 gl.LINE_STRIP 类似，但最后一个顶点和第一个顶点会形成闭合的线环。​
            gl.TRIANGLES：将每三个顶点作为一个三角形来绘制。​
            gl.TRIANGLE_STRIP：将每个顶点与前两个顶点形成的三角形依次相连。​
            gl.TRIANGLE_FAN：将每个顶点与第一个顶点和前一个顶点形成的三角形依次相连。
          count：指定要绘制的索引数量，即元素数组中的索引数目。每个索引对应一个顶点。​
          type：指定元素数组缓冲区中的索引数据类型。​
            gl.UNSIGNED_BYTE：8 位无符号整数。​
            gl.UNSIGNED_SHORT：16 位无符号整数。​
            gl.UNSIGNED_INT：32 位无符号整数。​
            offset：指定元素数组缓冲区中的偏移量，即从缓冲区的哪个位置开始读取索引数据。默认为 0。
        用法：
          绑定缓冲区：首先需要通过 gl.bindBuffer() 方法绑定顶点缓冲区和元素数组缓冲区。​
          设置顶点属性指针：使用 gl.vertexAttribPointer() 来指定顶点属性（如位置、颜色等）在缓冲区中的布局。​
          启用顶点属性：通过 gl.enableVertexAttribArray() 启用顶点属性数组。​
          绘制调用：最后调用 gl.drawElements() 来绘制图元，传入绘制模式、索引数量、索引类型和偏移量等参数。
    */
  </script>
</body>
</html>